<template>
  <div class="el-box">
    <CourseSection />
    <div class="el-data-box">
      <template v-if="listDatas">
        <div class="el-data el-course-box">
          <el-row :gutter="30">
            <template v-for="(item, k) in listDatas">
              <el-col :span="3" class="el-data-list">
                <div class="grid-content">
                  <div class="el-data-cover">
                    <a @click="detailRow(item)">
                      <img v-if="item.courseCoverPath" :src="get_img_src(item.courseCoverPath)" fit="cover" />
                      <img v-else src="@/assets/image/goods_default.png" fit="cover" />
                    </a>
                  </div>
                  <div class="el-data-title">
                    <span class="el-title el-fl">{{ item.courseName }}</span>
                    <span class="el-fr">
                    </span>
                  </div>
                  <div class="el-data-item">
                    <el-row>
                      <el-col :span="12">年级：{{ item.courseGradeName }}</el-col>
                      <el-col :span="12">学科：{{ item.courseSubjectName }}</el-col>
                      <el-col :span="12">版本：{{ item.courseVersionName }}</el-col>
                      <el-col :span="12">册别：{{ item.courseVolumeName }}</el-col>
                    </el-row>
                  </div>
                </div>
              </el-col>
            </template>
          </el-row>
        </div>
        <div class="el-page">
          <el-pagination
            :layout="listPages.layout"
            :current-page="listPages.page"
            :page-size="listPages.size"
            :page-sizes="listPages.sizes"
            :total="listPages.total"
            :prev-text="listPages.prevtext"
            :next-text="listPages.nexttext"
            :page-count="listPages.count"
            :pageer-count="listPages.counter"
            :hide-on-single-page="listPages.single"
            @size-change="page_size_change"
            @current-change="page_current_change"
            @prev-click="page_prev_click"
            @next-click="page_next_click"
          ></el-pagination>
        </div>
      </template>
      <template v-else>
        <div class="el-data-empty">数据加载中...</div>
      </template>
    </div>
    <el-main style="display: none;">
      <template v-if="listDatas">
        <div class="el-data el-course-box">
          <el-row :gutter="30">
            <el-col v-for="item in listDatas" :span="8" class="el-data-item">
              <div class="grid-content">
                <a @click="clickTo(item)" class="el-data-link">
                  <div class="list-cover"><img :src="get_img_src(item.courseCoverPath)" fit="cover" /></div>
                  <div class="el-title">{{ item.courseName }}</div>
                  <div class="el-title">{{ item.courseGradeName }}</div>
                  <div class="el-title">{{ item.courseSubjectName }}</div>
                  <div class="el-title">{{ item.courseVersionName }}</div>
                  <div class="el-title">{{ item.courseVolumeName }}</div>
                </a>
              </div>
            </el-col>
          </el-row>
        </div>
        <div class="el-page">
          <el-pagination
            :layout="listPages.layout"
            :current-page="listPages.current"
            :page-sizes="listPages.sizes"
            :page-size="listPages.size"
            :total="listPages.total"
            :prev-text="listPages.prevtext"
            :next-text="listPages.nexttext"
            :page-count="listPages.count"
            :pageer-count="listPages.counter"
            :hide-on-single-page="listPages.single"
            @size-change="page_size_change"
            @current-change="page_current_change"
            @prev-click="page_prev_click"
            @next-click="page_next_click"
          ></el-pagination>
        </div>
      </template>
    </el-main>
  </div>
</template>
<script src="./index.js"></script>
<style lang="scss" src="./index.scss"></style>
